<template>
  <el-dialog
    :title="$t('message.gdyd')"
    :visible.sync="showSiteFixedReserve"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    class="dialog-siteFixedReserve"
    width="700px"
  >
    <el-form ref="ruleForm" :rules="rules" :model="siteFixedReserveForm" label-width="auto" label-suffix="：">
      <el-form-item :label="$t('message.kjxz')">
        <el-radio-group
          v-model="siteFixedReserveForm.radio"
          @change="siteFixedReserveDate"
        >
          <el-radio :label="1">{{ $t('message.bannian') }}</el-radio>
          <el-radio :label="2">{{ $t('message.yiian') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="time" :label="$t('message.gdsd')">
        <el-date-picker
          v-model="siteFixedReserveForm.time"
          value-format="yyyy-MM-dd"
          type="daterange"
          :range-separator="$t('message.zhi')"
          :start-placeholder="$t('message.ksrq')"
          :end-placeholder="$t('message.jsrq')"
          :picker-options="pickerOptions"
          @change="getfixedWeeksByDay"
        />
      </el-form-item>
      <el-form-item prop="weeks" :label="$t('message.gdzq')">
        <el-checkbox-group v-model="siteFixedReserveForm.weeks">
          <el-checkbox
            v-for="(item, index) in week"
            :key="index + 1"
            :label="index + 1"
            :value="index + 1"
          >
            {{ item.weekDayName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item prop="cardNum" :label="$t('message.searchhy')">
        <el-input
          v-model="siteFixedReserveForm.cardNum"
          :placeholder="$t('message.qsr') + $t('message.hy1')"
          @keyup.enter.native="searchActionb"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchActionb"
          />
        </el-input>
      </el-form-item>
      <div v-if="member" class="member">
        <div class="cont">
          <div><span>NO.</span>{{ member.number }}</div>
          <div>{{ member.nickName }}</div>
          <div v-if="member.cardName" class="lx">{{ member.cardName }}</div>
        </div>
        <div class="cont">
          <div><span>{{ $t('message.sj') }}：</span>{{ member.phone }}</div>
          <div><span>{{ $t('message.ye') }}：</span>{{ member.money }}</div>
        </div>
      </div>
      <el-form-item :label="$t('message.ljfk')" prop="allPay">
        <el-radio-group
          v-model="siteFixedReserveForm.allPay"
        >
          <el-radio :label="0">{{ $t('message.fou') }}</el-radio>
          <el-radio :label="1">{{ $t('message.shi') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="siteFixedReserveForm.allPay == '1'" :label="$t('message.fkje')" prop="allPayMoney">
        <el-input
          v-model="siteFixedReserveForm.allPayMoney"
          maxlength="10"
          oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
          :placeholder="$t('message.qsr') + $t('message.fkje')"
        />
      </el-form-item>
      <el-form-item v-if="siteFixedReserveForm.allPay != '1'" :label="$t('message.zdkk')" prop="payStatue ">
        <el-radio-group
          v-model="siteFixedReserveForm.payStatue "
        >
          <el-radio :label="0">{{ $t('message.fou') }}</el-radio>
          <el-radio :label="1">{{ $t('message.shi') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('message.bzxx')">
        <el-input
          v-model="siteFixedReserveForm.remarks"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 10 }"
          :placeholder="$t('message.qsr') + $t('message.bzxx')"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancleSiteFixedReserve">{{ $t('message.qx') }}</el-button>
      <el-button v-preventReClick type="primary" :loading="loading" @click="addSiteFixedReserve">{{ $t('message.qr') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { siteFixedReserve, VIPInfo, fixedWeeksByDay } from '@/api'
import store from '@/store'
import { shortcuts } from '@/utils/config'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      pickerOptions: {
        shortcuts,
        disabledDate(time) {
          return time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
        }
      },
      showSiteFixedReserve: false,
      loading: false,
      siteFixedReserveForm: {
        weeks: [],
        time: []
      },
      week: [],
      rules: {
        time: [
          { type: 'array', required: true, message: this.$t('message.qxz') + this.$t('message.rq'), trigger: 'change' }
        ],
        weeks: [
          { type: 'array', required: true, message: this.$t('message.qxz') + this.$t('message.gdzq'), trigger: 'change' }
        ],
        payStatue: [
          { required: true, message: this.$t('message.qxzsf') + this.$t('message.zdkk'), trigger: 'change' }
        ],
        cardNum: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.hy1'), trigger: 'change' }
        ],
        allPay: [
          { required: true, message: this.$t('message.qxzsf') + this.$t('message.ljfk'), trigger: 'change' }
        ],
        allPayMoney: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.fkje'), trigger: 'blue' }
        ]
      },
      member: null,
      siteIds: []
    }
  },
  methods: {
    open(siteIds) {
      this.siteIds = siteIds
      this.member = null
      this.week = []
      this.siteFixedReserveForm = {
        weeks: [],
        time: []
      }
      this.showSiteFixedReserve = true
    },
    // 固定预定
    cancleSiteFixedReserve() {
      this.siteFixedReserveForm = {
        weeks: [],
        time: []
      }
      this.member = null
      this.showSiteFixedReserve = false
    },
    addSiteFixedReserve() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.member) {
            this.$message.info(this.$t('message.qsr') + this.$t('message.hy1'))
            return
          }
          this.loading = true
          siteFixedReserve({
            param: {
              endDay: this.siteFixedReserveForm.time[1],
              memberId: this.member.id,
              payStatue: this.siteFixedReserveForm.allPay === 0 ? this.siteFixedReserveForm.payStatue : 0,
              remarks: this.siteFixedReserveForm.remarks,
              siteIds: this.siteIds,
              allPayMoney: this.siteFixedReserveForm.allPayMoney,
              allPay: this.siteFixedReserveForm.allPay,
              startDay: this.siteFixedReserveForm.time[0],
              weeks: this.siteFixedReserveForm.weeks
            }
          }).then(res => {
            this.loading = false
            if (res.errorCode === '000000') {
              if (res.record) {
                this.$parent.$refs.child.continuePay(res.record, 'defaultReserve')
              } else {
                this.$message.success(this.$t('message.gdyd') + this.$t('message.success'))
              }
              this.siteFixedReserveForm = {
                weeks: [],
                time: []
              }
              this.member = null
              this.showSiteFixedReserve = false
              this.$parent.getSiteList()
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 根据时间段查询固定预定可用周期列表
    getfixedWeeksByDay() {
      this.$set(this.siteFixedReserveForm, 'weeks', [])
      fixedWeeksByDay({
        param: {
          endDay: this.siteFixedReserveForm.time[1],
          siteIds: this.siteIds,
          startDay: this.siteFixedReserveForm.time[0]
        }
      }).then(res => {
        if (res.errorCode === '000000') {
          this.week = res.recordList
        }
      }).catch(err => {
        console.log(err)
      })
    },
    siteFixedReserveDate() {
      if (this.siteFixedReserveForm.radio === 1) {
        const end = new Date()
        const start = new Date()
        end.setTime(start.getTime() + 3600 * 1000 * 24 * 180)
        this.$set(this.siteFixedReserveForm, 'time', [this.formatDate(start).value, this.formatDate(end).value])
      } else {
        const end = new Date()
        const start = new Date()
        end.setTime(start.getTime() + 3600 * 1000 * 24 * 365)
        this.$set(this.siteFixedReserveForm, 'time', [this.formatDate(start).value, this.formatDate(end).value])
      }
      this.getfixedWeeksByDay()
    },
    searchActionb() {
      if (!this.siteFixedReserveForm.cardNum) {
        this.$message.info(this.$t('message.qsr') + this.$t('message.hy1'))
        return
      }
      VIPInfo({
        param: {
          phoneOrNo: this.siteFixedReserveForm.cardNum
        }
      }).then(res => {
        if (res.errorCode === '000000') {
          this.member = res.record
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取星期
    calculation(s) {
      return s < 10 ? '0' + s : s
    },
    formatDate(date) {
      const year = date.getFullYear() + '-'
      const month = this.calculation(date.getMonth() + 1) + '-'
      const day = this.calculation(date.getDate())
      const week = [this.$t('message.z7', this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6'))][date.getDay()]
      return {
        label: month + day + ' ' + week,
        value: year + month + day,
        old: new Date(date)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.member {
  background-color: rgba(67, 94, 190, 0.1);
  padding: 20px;
  .cont {
    display: flex;
    div {
      margin-right: 20px;
      font-size: 16px;
      line-height: 1.5;
      &.lx {
        border: 1px #999 solid;
        border-radius: 4px;
        background-color: #fff;
        padding: 0 20px;
      }
      span {
        color: rgb(170, 170, 170);
      }
    }
  }
}
</style>
